<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>小区管理</title>
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet"/>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .row-margin-top {
            margin-top: 100px;
        }
        html,body{
          padding: 0;
          margin: 0;
        }
        .page {
            padding: 10px;
            margin-top: 50px;
        }
        .my-margin-top-10 {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <el-row class="page">
        <!--搜索栏-->
        <el-row :gutter="16">
            <el-col :span="2">
                <el-button type="primary" @click="add" size="small">新增</el-button>
            </el-col>
            <el-col :span="3">
                <el-input size="small" clearable="true" style="width:100%"
                          v-model="table.name" placeholder="请输入名称"
                          @clear="query" @keyup.enter.native="query">
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-cascader :options="regionList" v-model="table.regionNo" placeholder="请选择地区"
                             change-on-select='true'  style="width:100%"
                             clearable="true"
                             @change="query"
                             size='small' :props="regionListProps">
                </el-cascader>
            </el-col>
            <el-col :span="2">
                <el-select style="width:100%"
                           v-model.number="table.usable"
                           clearable="true"
                           placeholder="是否可用"
                           size='small'
                           @change='query'>
                    <el-option v-for="item in usableList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-select style="width:100%"
                           v-model.number="table.mng"
                           clearable="true"
                           placeholder="是否有管理员"
                           size='small'
                           @change='query'>
                    <el-option v-for="item in mngList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-date-picker style="width:100%" size="small"
                        v-model="table.time" @change="query"
                        editable="false"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
        </el-row>
        <!--表格-->
        <el-row class="my-margin-top-10">
            <el-col :span="24">
                <el-table :data="table.tableData"
                          border stripe style="width:100%" size="small"
                          :highlight-current-row="true"
                          ref="multipleTable" v-loading="table.loading">
                    <el-table-column label='编号' prop="id" width="80"></el-table-column>
                    <el-table-column label='小区名称' prop="name" min-width="200"></el-table-column>
                    <el-table-column label='省' prop="provinceName" min-width="120"></el-table-column>
                    <el-table-column label='市' prop="cityName" min-width="120"></el-table-column>
                    <el-table-column label='区县' prop="districtName" min-width="120"></el-table-column>
                    <el-table-column label='详细地址' prop="address" min-width="200"></el-table-column>
                    <el-table-column label='管理员数量' prop="mngNum" min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.mngNum==0" style="color:red;">无</span>
                            <span v-if="scope.row.mngNum>0" v-text="scope.row.mngNum"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label='是否可用' min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.usable==1">可用</span>
                            <span v-if="scope.row.usable==0" style="color:red;">不可用</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='总户数' prop="houseNum" min-width="100"></el-table-column>
                    <el-table-column label='总建筑面积' prop="buildAreaNum" min-width="100"></el-table-column>
                    <el-table-column label='专有部分面积' prop="exclusiveArea" min-width="100"></el-table-column>
                    <el-table-column label='创建人' prop="createMemberId" min-width="100"></el-table-column>
                    <el-table-column label='创建时间' prop="createTime" min-width="130"></el-table-column>
                    <el-table-column label='操作' fixed="right" min-width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click='modify(scope.row)'>修改</el-button>
                            <el-button type="text" @click='toMng(scope.row)'>管理员</el-button>
                            <el-button v-if="scope.row.usable==1" type="text" @click='disable(scope.row.id)'>禁用</el-button>
                            <el-button v-if="scope.row.usable==0" type="text" @click='usable(scope.row.id)'>启用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class='my-margin-top-10'
                               @current-change="currentChangeHandle"
                               :current-page="table.currentPage"
                               :page-size="table.pageSize"
                               layout="total, prev, pager, next, jumper"
                               :total="table.rowCount">
                </el-pagination>
            </el-col>
        </el-row>

    </el-row>

    <!--小区form弹窗-->
    <el-dialog :title="comForm.title" :visible.sync="comForm.dialog"
               width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="comForm" :rules="comForm.rules"
                     ref="comForm" size="small"
                     label-position="right" label-width="120px">
                <el-form-item label="小区名称" prop="name">
                    <el-input v-model="comForm.name" placeholder="请填写小区名称"></el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="regionNo">
                    <el-cascader :options="comForm.regionList" v-model="comForm.regionNo"
                                 placeholder="请选择地区"
                                 :change-on-select='false'
                                 style="width:100%"
                                 :clearable="false"
                                 size='small' :props="comForm.regionListProps">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="comForm.address" placeholder="请填写详细地址"></el-input>
                </el-form-item>
                <el-form-item label="总户数" prop="houseNum">
                    <el-input v-model="comForm.houseNum" placeholder="请填写总户数"></el-input>
                </el-form-item>
                <el-form-item label="总建筑面积" prop="buildAreaNum">
                    <el-input v-model="comForm.buildAreaNum" placeholder="请填写总建筑面积"></el-input>
                </el-form-item>
                <el-form-item label="专有部分面积" prop="exclusiveArea">
                    <el-input v-model="comForm.exclusiveArea" placeholder="请填写专有部分面积"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitComForm"
                               :disabled="comForm.submitDisabled">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    <!--小区管理员列表弹窗-->
    <el-dialog :title="mngTable.title" :visible.sync="mngTable.dialog"
               width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-row>
            <el-button type="primary" @click="addMng" size="small">新增</el-button>
        </el-row>
        <el-row class="my-margin-top-10">
            <el-table :data="mngTable.tableData"
                      border stripe style="width:100%" size="small"
                      :highlight-current-row="true"
                      ref="mngTable" v-loading="mngTable.loading">
                <el-table-column label='编号' prop="mngId" width="80"></el-table-column>
                <el-table-column label='电话' prop="phoneNum" min-width="120"></el-table-column>
                <el-table-column label='姓名' prop="realName" min-width="120"></el-table-column>
                <el-table-column label='是否可用' min-width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.usable==1">可用</span>
                        <span v-if="scope.row.usable==0" style="color:red;">不可用</span>
                    </template>
                </el-table-column>
                <el-table-column label='是否删除' min-width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isDelete==1" style="color:red;">已删除</span>
                        <span v-if="scope.row.isDelete==0">正常</span>
                    </template>
                </el-table-column>
                <el-table-column label='创建时间' prop="createTime" min-width="130"></el-table-column>
                <el-table-column label='操作' min-width="220">
                    <template slot-scope="scope">
                        <el-button type="text" @click='modifyMng(scope.row)'>修改</el-button>
                        <el-button type="text" @click='resetMngPass(scope.row)'>重置密码</el-button>
                        <el-button type="text" v-if="scope.row.usable==1" @click='disableMng(scope.row.mngId)'>禁用</el-button>
                        <el-button type="text" v-if="scope.row.usable==0" @click='usableMng(scope.row.mngId)'>启用</el-button>
                        <el-button type="text" v-if="scope.row.isDelete==0" @click='deleteMng(scope.row.mngId)'>删除</el-button>
                        <el-button type="text" v-if="scope.row.isDelete==1" @click='resetMng(scope.row.mngId)'>恢复</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='my-margin-top-10'
                           @current-change="mngChangeHandle"
                           :current-page="mngTable.currentPage"
                           :page-size="mngTable.pageSize"
                           layout="total, prev, pager, next, jumper"
                           :total="mngTable.rowCount">
            </el-pagination>
        </el-row>
    </el-dialog>

    <!--修改管理员密码dialog-->
    <el-dialog title="重置密码" :visible.sync="mngPassForm.dialog"
               :close-on-click-modal="false" :close-on-press-escape="false"
                width="30%">
        <el-form :model="mngPassForm" :rules="mngPassForm.rules"
                 ref="mngPassForm" size="small"
                 label-position="right" label-width="120px">
            <el-form-item label="新密码" prop="password">
                <el-input type="password" v-model="mngPassForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePass">
                <el-input type="password" v-model="mngPassForm.rePass"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitPass"
                           :disabled="mngPassForm.submitDisabled">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--管理员form-->
    <el-dialog :title="mngForm.title" :visible.sync="mngForm.dialog"
               :close-on-click-modal="false" :close-on-press-escape="false"
               width="30%">
        <el-form :model="mngForm" :rules="mngForm.rules"
                 ref="mngForm" size="small"
                 label-position="right" label-width="120px">
            <el-form-item label="手机号" prop="phoneNum">
                <el-input v-model="mngForm.phoneNum" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="mngForm.realName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="mngForm.isCreate">
                <el-input v-model="mngForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitMng"
                           :disabled="mngForm.submitDisabled">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="/assets/js/list.js"></script>
</body>
</html>